<!-- 商品搜索页面 -->
<template>
  <div>
    <div>
        <input type="text" v-model.trim="searchKeyword" @focus="handleFoucsEvent">
    </div>
    <div v-if="status=='default'">
        <div v-if="historyList.length>0">
        历史记录
        <van-icon @click="clearHistoryRecord" name="delete-o" size="20" color="red" />
        <ul>
            <li v-for="item in historyList" :key="item.id">
                {{item.keyword}}
            </li>
        </ul>
    </div>
    <div>
        热门搜索
    </div>
    </div>
    <div v-else-if="status=='nameList'">
        <ul v-if="keywordsList.length>0">
            <li @click="searchGoodsAndAddHistory(item.name)" v-for="item in keywordsList" :key="item.id">
                {{item.name}}
            </li>
        </ul>
        <div v-else>
            数据库暂无此类商品
            <!-- <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fa4064bdab5f6c800ed664014f3eb7d13a4dd25b3138d0-hYHe07_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669512956&t=a1b65fb5b0ae7754025bc70e5f63190f" alt="" srcset=""> -->
        </div>
    </div>
    <div v-else>
        <!-- 商品列表 -->
        商品列表展示
    </div>
    
  </div>
</template>

<script>
import {
    indexaction as indexactionApi,
    clearhistoryAction as clearhistoryActionApi,
    helperaction as helperactionApi,
    addhistoryaction as addhistoryactionApi,
} from '@/api/home/goodsSearch'
export default {
    name:'GoodsSearch',
  data () {
    return {
        status:'default',// default, nameList ,goodsList
        searchKeyword:'',// 搜索关键字
        historyList:[],
        keywordsList:[],// 搜索商品列表
    }
  },

  components: {},

  computed: {},

  created() {
    this.getHistoryData()
  },

  mounted() {},

  methods: {
    handleFoucsEvent(){
        this.status = 'nameList'
    },
    async getHistoryData(){
        let res = await indexactionApi({
            openId:localStorage.getItem('openId')
        })
        // console.log('res=>',res);
        this.historyList = res.historyData
        
    },
     async clearHistoryRecord(){
          // 清除历史记录
        let res = await clearhistoryActionApi({
            openId:localStorage.getItem('openId')
        })
        if(res.data == "清除成功"){
            this.historyList = []
            // this.getHistoryData()
        }
    },
    // 关键字添加到数据库，并且搜索商品
    async searchGoodsAndAddHistory(goodsName){
        this.status = "goodsList"
        let res = await helperactionApi({
            keyword:goodsName
        })
        // 把关键字保存到数据库
        let res2 = await addhistoryactionApi({
            keyword:goodsName,
            openId:localStorage.getItem('openId')
        })
        console.log('res2=>',res2);
        
    }
  },
  watch:{
     async searchKeyword(newVal,oldVal){
        // console.log('newVal=>',newVal);
        // console.log('oldVal=>',oldVal);
        if(newVal !==''){
            this.status = 'nameList'
            let res = await helperactionApi({
                keyword:newVal
            })
            // console.log('res=>',res);
            this.keywordsList = res.keywords
        }else{
            this.status = 'default'
        }
      

        
    }
  }
}

</script>
<style lang='scss' scoped>
</style>